<template>
	<div class="big_screen_model">
		<div class="model_title">
			<img src="/img/bigScreen/012.png" alt="" />
		</div>
		<div class="model_echarts">
			<div class="info_title">
				<span>地上罐组1</span>
				<span>所属地区：D2 区</span>
			</div>
			<div class="info_tabel">
                <div class="section">
                	<div class="item" v-for="item in data1" :key="index">
                		<div class="item_top">{{item.label}}</div>
                		<div class="item_bottom">{{item.test}}</div>
                	</div>
                </div>
                <div class="section">
                	<div class="item" v-for="item in data2" :key="index">
                		<div class="item_top">{{item.label}}</div>
                		<div class="item_bottom">{{item.test}}</div>
                	</div>
                </div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: '基础信息',
		data() {
			return {
				data1:[{
					"label":'存储介质',
					"test":'文本'					
				},{
					"label":'形态',
					"test":'文本'					
				},{
					"label":'规格',
					"test":'文本'					
				},{
					"label":'储罐形式',
					"test":'文本'					
				},{
					"label":'存量',
					"test":'文本'					
				}],
				data2:[{
					"label":'应急处理',
					"test":'文本'					
				},{
					"label":'CAS号',
					"test":'文本'					
				},{
					"label":'化学品类',
					"test":'文本'					
				},{
					"label":'设计容积',
					"test":'文本'					
				},{
					"label":'临界量',
					"test":'文本'					
				}]				
			}
		},
		mounted() {
			
		},
		methods: {


		}
	}
</script>

<style lang="scss" scoped="">
	* {
		box-sizing: border-box;
	}
	
	.big_screen_model {
		display: flex;
		flex-direction: column;
		height: 100%;
		.model_title {
			img {
				width: 100%;
				display: block;
			}
		}
		.model_echarts {
			padding: 20px 15px;
			flex: 1;
			display: flex;
			flex-direction: column;
			.info_title{
				padding-bottom: 10px;
				display: flex;
				
				span{flex: 1;text-align: center;color: #fff;font-size: 14px;}
			}
			.info_tabel{flex: 1;display: flex;flex-direction: column;
			   .section{flex: 1;display: flex;margin-bottom: 1px;
			     .item{flex: 1;margin-right: 1px;display: flex;flex-direction: column;
			       .item_top{flex: 1;margin-bottom: 1px;background: rgba(2, 9, 51, 0.3);font-size: 14px;color: #E8EFF6;display: flex;align-items: center;justify-content: center;}
			       .item_bottom{flex: 1;background: rgba(2, 9, 51, 0.3);font-size: 14px;color: #66FFFF;display: flex;align-items: center;justify-content: center;}
			     }	
			     .item:nth-last-child(1){margin-right: 0;}		    
			   }
			   .section:nth-last-child(1){margin-bottom: 0;}
			   
			}

		}
	}
	
</style>